<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    let vm = {
        data () {
            return {
                msg: 'GalaxySa'
            }
        },
        template: `<div>{{msg}}</div>`,
        // 生命周期函数=>自动执行的函数

        beforeCreate () {
            console.log('beforeCreate', this.msg);
            // 该生命周期在vue初始化前，通常在这个周期内做插件的初始化工作
            //  由于此时vue未实例化，此处只能做与vue无关的工作
        },
        created () {
            console.log('created', this.msg);
            // 该生命周期在vue初始化后,this即为vue的实例化对象
            // 通常做一些赋值操作，如请求
            setTimeout(() => {
                this.msg = 'haha';
            }, 1000)
        },
        // 渲染前 结合ref用来获取节点，进行dom操作
        beforeMount () { console.log('beforeMount'); },
        // 渲染后
        mounted () { console.log('mounted'); },
        // 当响应式数据发生变化的时候触发的
        beforeUpdate () { console.log('beforeUpdate'); },
        updated () { console.log('updated'); },

    }
    Vue.createApp(vm).mount('#app')
</script>

</html>